<template>
  <a-modal
    :visible="myVisible"
    width="80%"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> 分组排序 </template>
    <div>
      使用指南 1、鼠标移动到审批分组上方拖曳进行排序 2、保存使新排序生效
    </div>
    <Order v-model:data="copyData" />
  </a-modal>
</template>
<script setup lang="ts">
import Order from "@/components/Order.vue";
import cloneDeep from "lodash.clonedeep";

const props = withDefaults(
  defineProps<{
    visible: boolean;
    data?: any;
  }>(),
  {
    visible: false,
  }
);
const copyData = ref();
const myVisible = computed({
  get: () => {
    copyData.value = cloneDeep(props.data);
    return props.visible;
  },
  set: () => emit("update:visible"),
});
const emit = defineEmits(["update:visible", "update:data", "orderSave"]);
const personerList = [
  { objId: 1, objName: "张三" },
  { objId: 2, objName: "李四" },
  { objId: 3, objName: "王五" },
  { objId: 4, objName: "赵六" },
  { objId: 5, objName: "孙七" },
  { objId: 6, objName: "周八" },
  { objId: 7, objName: "吴九" },
  { objId: 8, objName: "郑十" },
];

const close = () => {
  emit("update:visible", false);
};
const handleClick = () => {
  close();
};
const handleOk = () => {
  emit("orderSave", copyData.value);
  close();
};
const handleCancel = () => {
  close();
};
const userList = ref<any>([]);
const change = (e: any) => {
  const user = personerList.find((item) => item.objId === e);
  userList.value = [user];
};
</script>
